import React, { Component } from 'react';
import * as common from 'common/common.js';
import { Modal, Toast } from 'antd-mobile';
import './UserCart.less';

import SeperateLine from 'common/components/SeperateLine.js';

import CartItem from "./sub/CartItem.js";
import CartLogin from "./sub/CartLogin.js";
import Bottom from 'common/containers/Bottom.js';

import * as userApi from 'common/api/UserApi.js';

const alert = Modal.alert;

/**
 * 购物车组件
 * @param {cartList} 购物车列表数据
 */
class UserCart extends Component{
	
	constructor(props) {
	    super(props);
	    this.state = {
	    	cartIds: [],
	    	cartList: [],
	    	cartEmpty: false,
	    	checkAll: false,
	    	totalPrice: 0.00.toFixed(2),
	    	modalFlag: false
	    }
	}    
	
	componentDidMount(){
		this.getMemberCartList();
	}
	
	//获取会员购物车列表
	getMemberCartList = () => {
		Toast.loading("", common.TIPS_LOADING_DURATION);
		userApi.memberCartList({
			userId: common.userId()
		}).then(result => {
			Toast.hide();
			if(result.code == common.SUCCESS){
				if(result.data.length == 0){
					this.setState({
						cartList: result.data,
						cartEmpty: true
					}, function() {
						this.computeOrder();
				   	})
				}else{
					this.setState({
						cartList: result.data,
						cartEmpty: false
					}, function() {
						this.computeOrder();
				   	})
				}
			}else{
				Toast.info(result.msg, common.TIPS_INFO_DURATION);
			}
		})
	}
	
	//订单页面
	gotoOrder = () => {
		const { cartIds, cartList } = this.state;
		if(cartList.length == 0){
			Toast.info("购物车没有商品", common.TIPS_INFO_DURATION);
			return;
		}
		if(cartIds.length == 0){
			Toast.info("请选择要购买的商品", common.TIPS_INFO_DURATION);
			return;
		}
		common.gotoOrderPreview({
			cartIds: cartIds.join(","),
		})
	}
	
	//选中单个购物车
	checkCart = (status, cartId) => {
		var cartIds = this.state.cartIds;
		var cartList = this.state.cartList;
		if(status){
			if(!common.isInArray(cartIds, cartId)){
				cartIds.push(cartId);
			}
		}else{
			cartIds.splice(common.indexInArray(cartIds, cartId), 1);
		}
		if(cartIds.length == cartList.length){
			this.setState({
				cartIds: cartIds,
				checkAll: true
			}, function() {
				this.computeOrder();
		   	})
		}else{
			this.setState({
				cartIds: cartIds,
				checkAll: false
			}, function() {
				this.computeOrder();
		   	})
		}
	}
	
	//选中全部购物车
	checkAllCart = (status) => {
		const { cartList } = this.state;
		var cartIds = [];
		if(status){
			cartList.map((item, index) => {
				cartIds.push(item.id);
			})
			this.setState({
				cartIds: cartIds,
				checkAll: true
			}, function() {
				this.computeOrder();
		   	})
		}else{
			this.setState({
				cartIds: cartIds,
				checkAll: false
			}, function() {
				this.computeOrder();
		   	})
		}
	}
	
	//显示删除提示框
	showDeleteDialog = () => {
		this.setState({
	      modalFlag: true,
	  });
	}
	
	//关闭删除提示框
	hideDeleteDialog = () => {
		this.setState({
	      modalFlag: false,
	  });
	}
	
	//计算选中购物车的总金额
	computeOrder = () => {
		var totalPrice = 0;
		const { cartIds, cartList } = this.state;
		cartList.map((item, index) => {
			if(common.isInArray(cartIds, item.id)){
				totalPrice += parseFloat(item.goodsPrice)*parseFloat(item.goodsNum);
			}
		})
		this.setState({
			totalPrice: totalPrice.toFixed(2)
		})
	}
	
	//确定删除
	deleteCart = () => {
		this.setState({
	      modalFlag: false,
	  	});
		const { cartIds } = this.state;
    	Toast.loading("", common.TIPS_LOADING_DURATION);
    	userApi.deleteCart({
    		cartIds: cartIds.join(",")
    	}).then(result => {
    		Toast.hide();
    		if(result.code == common.SUCCESS){
    			this.getMemberCartList();
    			setTimeout(() => {
						this.computeOrder();
					}, 100)
    			Toast.info("删除成功", common.TIPS_INFO_DURATION);
    		}else{
    			Toast.info("删除失败", common.TIPS_INFO_DURATION);
    		}
    	})
	}
	
	render(){
		const { cartEmpty, checkAll, cartIds, cartList, totalPrice, modalFlag } = this.state;
		var checkAllImg = checkAll ? "assets/img/select.png" : "assets/img/unselect.png";
		return(
			<div className="cart">
				{/* 删除购物车弹框  */}
				<Modal
					className="modal"
					title="确定删除?"
					transparent
					maskClosable={true}
					platform="ios"
					visible={modalFlag}
					onClose={this.hideDeleteDialog.bind(this)}
					footer={[{ text: '确定', onPress: this.deleteCart.bind(this)}, { text: '取消', onPress: this.hideDeleteDialog.bind(this)}]}
					>
				</Modal>
				{/* 标题栏  */}
				<div className="cartHeader top_container">
					<div className="top">
						<div className="left" onClick={()=>common.goBack()}>
							<img src="assets/img/left.png"/>
						</div>
						<div className="content">
							购物车
						</div>
						<div className="right" onClick={()=>this.showDeleteDialog()}>
							<img src="assets/img/del.png"/>
						</div>
					</div>
				</div>
				<SeperateLine lineHeight={"1.1rem"}></SeperateLine>
				{/* 购物车列表  */}
				{
					!cartEmpty && cartList.map((item, index) => {
						return(
							<CartItem getMemberCartList={this.getMemberCartList.bind(this)} checkCart={this.checkCart.bind(this)} cartIds={cartIds} key={index} cartInfo={item}></CartItem>
						)
					})
				}
				{
					cartEmpty && 
					<div className="cartBlank">
						<img src="assets/img/cart_empty.png"/>
						<span>购物车空空如也!</span>
					</div>
				}
				<SeperateLine lineHeight={"1.1rem"}></SeperateLine>
				{/* 全选操作  */}
				<div className="cart_bottom">
					<div className="left" onClick={()=>this.checkAllCart(!checkAll)}>
						<img src={checkAllImg}/>
						<span>全选</span>
					</div>
					<div className="right">
						<span className="totalPrice">¥{common.fenToYuan(totalPrice)}</span>
						<div className="btn" onClick={()=>this.gotoOrder()}>
							<span>去结算</span>
						</div>
					</div>
				</div>
				<Bottom selectedTab="cart"></Bottom>
			</div>
		)
	}
}

export default UserCart;